<template>
  <span class="c-red fz-12" @click="onGuide">没有截图？</span>

  <van-dialog style="overflow: unset" v-model:show="state.visible" title="" :show-confirm-button="false">
    <div class="guide">
      <div class="mb-20">截图指南</div>
      <img v-if="state.channel === '615'" class="guide-img" src="@/assets/img/guide.png" />
      <img v-if="state.channel === '734'" class="guide-img" src="@/assets/img/koubei_guide.svg" />
    </div>
    <template #footer>
      <van-icon class="close-icon" name="close" @click="state.visible = false" />
    </template>
  </van-dialog>
</template>

<script>
import { defineComponent, reactive } from 'vue';
const channelList = ['615', '734']

export default defineComponent({
  setup() {
    const state = reactive({
      visible: false,
      channel: '615'
    })
    const show = ({channel}) => {
      if (channelList.includes(channel)) {
        state.channel = channel
      }
      state.visible = true
    }
    const onGuide = () => {
      state.visible = true
    }
    return {
      state,
      show,
      onGuide
    }
  }
})
</script>

<style lang="less" scoped>
.guide {
  padding: 20px;
  text-align: center;
  .guide-img {
    width: 100%;
  }
}
.close-icon {
  font-size: 28px;
  position: absolute;
  left: calc(50% - 12px);
  bottom: -40px;
  color: #fff;
}
</style>
